<template>
  <div id="home" style="display: flex; flex-direction: row;">
    <div class="box1" style="margin-right: 200px;">
      <h1>用户体验</h1>
      <h2>处理数据回显</h2>
      <h3>未处理</h3>
      <ProvideComp :store="storeSelect" :model="modelSelectA">
        <StoreSelectCompN v-model="modelSelect.data.selectData" :signData="{id: 'id', value: 'name', label: 'label'}"/>
      </ProvideComp>
      <h3>已处理</h3>
      <h4>单选</h4>
      <ProvideComp :store="storeSelect" :model="modelSelectA">
        <StoreSelectComp v-model="modelSelect.data.selectData" :signData="{id: 'id', value: 'name', label: 'label'}"/>
      </ProvideComp>
      <h4>多选</h4>
      <ProvideComp :store="storeSelectM" :model="modelSelectA">
        <StoreSelectCompM v-model="modelSelectM.data.selectData" :signData="{id: 'id', value: 'name', label: 'label'}" multiple/>
      </ProvideComp>
    </div>
    <div class="box3" style="margin-right: 200px;">
      <h1>性能处理</h1>
      <h2>大量Select导致Node节点过多</h2>
      <ProvideComp :store="storeSelect" :model="modelSelectA">
        <StoreSelectComp v-model="modelSelect.data.selectData" :signData="{id: 'id', value: 'name', label: 'label'}"/>
      </ProvideComp>
      <h2>el-options过多使用无限滚动</h2>
      <ProvideComp :store="storeSelect" :model="modelSelectA">
        <StoreSelectCompL v-model="modelSelect.data.selectData" :signData="{id: 'id', value: 'name', label: 'label'}"/>
      </ProvideComp>
    </div>
    <div class="box2" style="margin-right: 200px;">
      <h1>异步数据处理</h1>
      <ProvideComp :store="storeSelect" :model="modelSelectA">
        <StoreSelectCompE v-model="modelSelect.data.selectData" :store="storeSelectE" :signData="{id: 'id', value: 'name', label: 'label'}"/>
      </ProvideComp>
    </div>
    <div class="box4">
      <h1>功能追加</h1>
      <h2>添加功能</h2>
      <ProvideComp :store="storeSelect" :model="modelSelectA">
        <StoreSelectCompA v-model="modelSelect.data.selectData" :signData="{id: 'id', value: 'name', label: 'label'}"></StoreSelectCompA>
      </ProvideComp>
      <h2>查找功能</h2>
      <ProvideComp :store="storeSelect" :model="modelSelectS">
        <StoreSelectCompS v-model="modelSelect.data.selectData" :signData="{id: 'id', value: 'name', label: 'label'}"></StoreSelectCompS>
      </ProvideComp>
    </div>
  </div>
</template>

<script>
import StoreSelectComp from '@/components/Select/StoreSelectComp.vue';
import StoreSelectCompE from '@/components/Select/StoreSelectCompE.vue';
import StoreSelectCompN from '@/components/Select/StoreSelectCompN.vue';
import StoreSelectCompM from '@/components/Select/StoreSelectCompM.vue';
import StoreSelectCompL from '@/components/Select/StoreSelectCompL.vue';
import StoreSelectCompA from '@/components/Select/StoreSelectCompA.vue';
import StoreSelectCompS from '@/components/Select/StoreSelectCompS.vue';

import ProvideComp from '@/components/ProvideComp.vue';

import { StoreSelect, StoreSelectM, StoreSelectE, StoreSelectL } from '@/model/select/storeSelcetModel'
import { ModelSelect, ModelSelectM, ModelSelectA, ModelSelectS } from '@/model/select/storeSelcetModel'

export default {
  name: 'HomeView',
  components:{
    StoreSelectCompE,
    StoreSelectCompN,
    StoreSelectComp,
    StoreSelectCompM,
    StoreSelectCompL,
    StoreSelectCompA,
    StoreSelectCompS,
    ProvideComp
  },
  beforeCreate(){
    this.storeSelect = new StoreSelect()
    this.storeSelectM = new StoreSelectM()
    this.storeSelectE = new StoreSelectE()
    this.storeSelectL = new StoreSelectL()

    this.modelSelect = new ModelSelect()
    this.modelSelect.findData(1)
    this.modelSelectM = new ModelSelectM()
    this.modelSelectM.findData(1)
    this.modelSelectA = new ModelSelectA()
    this.modelSelectS = new ModelSelectS()
  }
}
</script>
